<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>消息提示</title>
	<link rel="stylesheet" href="../../include/css/public.min.css">
	<link rel="stylesheet" href="../../include/css/iconfont.min.css">
	<link rel="stylesheet" href="../doc-lib/solarized-light.css">
	<link rel="stylesheet" href="../doc-lib/doc.css">
	<style>
		.msg {margin-top: 12px;}
	</style>
</head>
<body>
    <div class="page-cont">
	    <div class="crumb"></div>
        <div class="page-title">
			<h2>消息提示</h2>
			<p>消息提示用于即时反馈用户主动操作后的响应信息。</p>
		</div>
		<div class="section">
			<h4 class="section-title"><i class="iconfont icon-subtraction"></i> 基本类型</h4>
			<div class="section-cont">
				<p>共提供了 5 种不同色彩的消息提示框用于不同场合：</p>
				<div class="grid-row">
					<div class="grid-col grid-col-5"><strong>实例</strong></div>
					<div class="grid-col grid-col-7"><strong>描述</strong></div>
				</div>
				<div class="grid-row">
					<div class="grid-col grid-col-5">
						<div class="msg msg-normal">
							<i class="iconfont icon-info"></i>
							<p>设备列表已更新。</p>
						</div>
					</div>
					<div class="grid-col grid-col-7">
						<pre><code class="html">&lt;div class="msg msg-normal"&gt;
    &lt;i class="iconfont icon-info"&gt;&lt;/i&gt;
    &lt;p&gt;设备列表已更新。&lt;/p&gt;
&lt;/div&gt;</code></pre>
						<p>适用于普通类型的消息，起到辅助说明的作用。</p>
					</div>
				</div>
				<div class="grid-row">
					<div class="grid-col grid-col-5">
						<div class="msg msg-success">
							<i class="iconfont icon-success_fill"></i>
							<p>设置保存成功！</p>
						</div>
					</div>
					<div class="grid-col grid-col-7">
						<pre><code class="html">&lt;div class="msg msg-success"&gt;
    &lt;i class="iconfont icon-success_fill"&gt;&lt;/i&gt;
    &lt;p&gt;设置保存成功！&lt;/p&gt;
&lt;/div&gt;</code></pre>
						<p>适用于成功类型的消息，常用于提示操作已成功完成。</p>
					</div>
				</div>
				<div class="grid-row">
					<div class="grid-col grid-col-5">
						<div class="msg msg-warning">
							<i class="iconfont icon-prompt_fill"></i>
							<p>您关闭了提醒功能，将无法收到最新动态。</p>
						</div>
					</div>
					<div class="grid-col grid-col-7">
						<pre><code class="html">&lt;div class="msg msg-warning"&gt;
    &lt;i class="iconfont icon-prompt_fill"&gt;&lt;/i&gt;
    &lt;p&gt;您关闭了提醒功能，将无法收到最新动态。&lt;/p&gt;
&lt;/div&gt;</code></pre>
						<p>适用于警告类型的消息，常用于强调某些需要注意的内容。</p>
					</div>
				</div>
				<div class="grid-row">
					<div class="grid-col grid-col-5">
						<div class="msg msg-error">
							<i class="iconfont icon-warning_fill"></i>
							<p>与服务器连接中断，请检查网络！</p>
						</div>
					</div>
					<div class="grid-col grid-col-7">
						<pre><code class="html">&lt;div class="msg msg-error"&gt;
    &lt;i class="iconfont icon-warning_fill"&gt;&lt;/i&gt;
    &lt;p&gt;与服务器连接中断，请检查网络！&lt;/p&gt;
&lt;/div&gt;</code></pre>
						<p>适用于失败类型的消息，一般用于反馈错误、紧急、故障等信息，提醒用户。</p>
					</div>
				</div>
			</div>
		</div>
		<div class="section">
			<h4 class="section-title"><i class="iconfont icon-subtraction"></i> 使用方法</h4>
			<div class="section-cont">
				<strong>1. 静态调用</strong>
				<p class="mb10">静态调用就是直接在页面上写好消息提示框的 HTML 结构和内容，使其直接显示出来，具体请参考本文“基本类型”里的实例。</p>
				<strong>2. 动态调用</strong>
				<p>动态调用是编写 JavaScript 脚本来动态控制消息提示框的提示类型、提示文案、图标、回调、事件等项目。</p>
				<div class="grid-row">
					<div class="grid-col grid-col-5"><strong>实例</strong></div>
					<div class="grid-col grid-col-7"><strong>代码</strong></div>
				</div>
				<div class="grid-row">
					<div class="grid-col grid-col-5">
						<p class="mb10">请点击下面按钮来弹出不同类型的消息提示：</p>
						<button class="btn btn-normal" onclick="ejectMsg('normal')">普通</button>
						<button class="btn btn-normal" onclick="ejectMsg('success')">成功</button>
						<button class="btn btn-normal" onclick="ejectMsg('warning')">警告</button>
						<button class="btn btn-normal" onclick="ejectMsg('error')">错误</button>
						<div class="mt15" id="demo_eject"></div>
					</div>
					<div class="grid-col grid-col-7">
						<pre><code class="javascript">// “普通”按钮点击
$('#demo_eject').msg({
    type: 'normal',  // 消息类型
    text: '这是一条普通消息。'
});

// “成功”按钮点击
$('#demo_eject').msg({
    type: 'success',  // 消息类型
    text: '恭喜你，这是一条成功消息！'
});

// “警告”按钮点击
$('#demo_eject').msg({
    type: 'warning',  // 消息类型
    text: '注意了，这是一条警告消息哦'
});

// “错误”按钮点击
$('#demo_eject').msg({
    type: 'error',  // 消息类型
    text: '出错了，这是一条警告消息！'
});</code></pre>
					</div>
				</div>
				<div class="grid-row">
					<div class="grid-col grid-col-5">
						<p class="mb10 mr15">上面的实例中，弹出的消息提示框会默认在 3s 后自动消失，这个时间可通过 <code>delay</code> 参数来自定义（单位为 ms），当为 0 时，不会自动消失。</p>
						<button class="btn btn-normal" onclick="delayMsg(5000)">弹出 5s 后消失</button>
						<button class="btn btn-normal" onclick="delayMsg(0)">弹出后不会自动消失</button>
						<button class="btn btn-normal" onclick="closeMsg()">手动关闭</button>
						<div class="mt15" id="demo_delay"></div>
					</div>
					<div class="grid-col grid-col-7">
						<pre><code class="javascript">// 弹出 5s 后消失
$('#demo_delay').msg({
    delay: 5000,  // 消息停留时间
    text: '该消息提示框将在 5s 后消失'
});

// 弹出后不会自动消失
$('#demo_delay').msg({
    delay: 0,  // 消息停留时间
    text: '该消息提示框不会自动消失'
});

// 手动关闭
$('#demo_delay').msg('close');</code></pre>
					</div>
				</div>
				<div class="grid-row">
					<div class="grid-col grid-col-5">
						<p class="mb10 mr15">动态调用还支持自定义消息提示的小图标，通过设置 <code>icon</code> 参数为图标名称（图标名称参见 <a href="icon.html"> 组件 → 图标</a>），即可显示相应图标的消息提示框。</p>
						<div class="mt15" id="demo_icon"></div>
					</div>
					<div class="grid-col grid-col-7">
						<pre><code class="javascript">$('#demo_icon').msg({
    delay: 0,
    type: 'warning',
    icon: 'icon-feedback_fill',  // 图标名称
    text: '你确定要这么做吗？后果自负哦'
});

$('#demo_icon').msg({
    delay: 0,
    type: 'success',
    icon: 'icon-mail_fill',  // 图标名称
    text: '邮件发送成功！'
});

$('#demo_icon').msg({
    delay: 0,
    type: 'normal',
    icon: 'icon-reboot',  // 图标名称
    text: '设备重启中，请稍候...'
});

$('#demo_icon').msg({
    delay: 0,
    type: 'error',
    icon: 'icon-lock_fill',  // 图标名称
    text: '验证失败！系统已锁定'
});</code></pre>
					</div>
				</div>
			</div>
		</div>
    </div>
    <script src="../../include/js/jquery-1.11.3.min.js"></script>
    <script src="../../include/js/public.min.js"></script>
    <script src="../doc-lib/highlight.pack.js"></script>
	<script src="../doc-lib/doc.js"></script>
    <script>
		hljs.initHighlightingOnLoad();

		var msgTypeDemo = {
			normal: '这是一条普通消息。',
			success: '恭喜你，这是一条成功消息！',
			warning: '注意了，这是一条警告消息哦',
			error: '出错了，这是一条警告消息！'
		};

		function ejectMsg(type) {
			$('#demo_eject').msg({
				type: type,
				text: msgTypeDemo[type]
			});
		}

		function delayMsg(time) {
			var msg = '该消息提示框不会自动消失';

			if (time) {
				msg = '该消息提示框将在 ' + (time / 1000) + 's 后消失';
			}

			$('#demo_delay').msg({
				delay: time,
				text: msg
			});
		}

		function closeMsg() {
			$('#demo_delay').msg('close');
		}

		$('#demo_icon').msg({
			delay: 0,
			type: 'warning',
			icon: 'icon-feedback_fill',
			text: '你确定要这么做吗？后果自负哦'
		}).msg({
			delay: 0,
			type: 'success',
			icon: 'icon-mail_fill',
			text: '邮件发送成功！'
		}).msg({
			delay: 0,
			type: 'normal',
			icon: 'icon-reboot',
			text: '设备重启中，请稍候...'
		}).msg({
			delay: 0,
			type: 'error',
			icon: 'icon-lock_fill',
			text: '验证失败！系统已锁定'
		});
    </script>
</body>
</html>
